<template>
	<view class="container">
		<view class="shop-list">
			<ShopItem v-for="(shop, index) in shopList" :shop="shop" :key="index" @tap="callPhone(index)">
				<template slot="phone">
					<view style="font-size: 28rpx; padding-bottom: 15rpx">
						<text class="iconfont icon-phone" style="color: #111"></text>
						<text style="color: #323233">{{ shop.phone }}</text>
					</view>
				</template>
			</ShopItem>
		</view>
	</view>
</template>

<script>
import { listShop } from '@/api/shop';
import locationUtil from '@/utils/location.js';
import ShopItem from '@/components/shop-item.vue';
import { mapGetters } from 'vuex';
export default {
	components: {
		ShopItem
	},
	onShow() {
		this.getLocation();
	},
	data() {
		return {
			shopList: []
		};
	},
	computed: {
		...mapGetters(['appId'])
	},
	methods: {
		/**
		 * 获取门店列表，并按照定位距离排列
		 */
		getLocation() {
			locationUtil.getLocation().then((coordinate) => {
				listShop(this.appId).then((res) => {
					console.log(res);
					this.shopList = res.data;
					this.shopList.forEach((shop) => {
						const lon1 = coordinate.longitude;
						const lat1 = coordinate.latitude;
						console.log(shop);
						const lon2 = shop.longitude;
						const lat2 = shop.latitude;
						shop.distance = locationUtil.getDistanceFromLatLonInKm(lon1, lat1, lon2, lat2);
					});
				});
			});
		},
		callPhone(index) {
			const phone = this.shopList[index].phone;
			uni.showModal({
				content: '是否拨打门店客服电话',
				success: (res) => {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: phone
						});
					} else if (res.cancel) {
					}
				}
			});
		}
	}
};
</script>

<style>
page {
	background-color: #f5f5f5;
}
</style>

<style scoped lang="less">
.container .header {
	background-color: #fff;
}

.container .shop-list {
	margin-top: 20rpx;
	background-color: #fff;
}
</style>
